<template>
  <div id="reportac">
    <el-row>
      <el-col :span="24">
        <div class="tob-bar">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>公积金申报</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div style="height:50px;width:100%"></div>
      <div class="mainContainer addCompanyPage">
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="增员" name="first">
                <div class="mainContainer caseListPage">
                  <div class="table-serch-bar">
                    <el-form ref="form" :inline="true" size="medium" label-width="70px">
                      <el-form-item label="用户名称">
                        <el-input v-model="form.name"></el-input>
                      </el-form-item>
                      <el-form-item label="参保地">
                        <el-input v-model="form.a_region"></el-input>
                      </el-form-item>
                      <el-form-item label="创建时间">
                        <el-col :span="10">
                          <el-date-picker type="date" placeholder="选择日期" v-model="form.Stime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="10">
                          <el-date-picker type="date" placeholder="选择日期" v-model="form.Etime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                        </el-col>
                      </el-form-item>
                      <el-form-item label="状态">
                        <el-select v-model="form.status" placeholder="请选择">
                          <el-option label="申报中" value="1"></el-option>
                          <el-option label="已撤回" value="2"></el-option>
                          <el-option label="申报成功" value="3"></el-option>
                          <el-option label="申报失败" value="4"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="success" @click="onSubmit">查询</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                  <el-table
                    @selection-change="handleSelectionChange"
                    class="my-table"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :default-sort="{prop: 'date', order: 'descending'}"
                  >
                    <el-table-column width="55" align="center" type="selection"></el-table-column>
                    <el-table-column min-width="90" align="center" type="index" label="序号"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="companyName" label="客户名称"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="name" label="姓名"></el-table-column>
                    <el-table-column min-width="200" align="center" prop="id_card" label="证件号"></el-table-column>
                    <el-table-column min-width="200" align="center" prop="a_region" label="参保地"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="a_jointime" label="参保时间"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="status" label="状态"></el-table-column>
                    <el-table-column min-width="90" align="center" prop="a_cbase" label="基数"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="create_time" label="创建时间"></el-table-column>

                  </el-table>
                  <div class="table-tools clearfix">
                    <div class="fl">
                      <!--                      <el-button type="default" icon="iconfont iconview" size="medium">报盘</el-button>-->
                      <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase">申报成功</el-button>
                      <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase1">申报失败</el-button>
                      <el-button type="default" icon="iconfont icondelet1" size="medium" @click="handleTest1">数据下载</el-button>
                    </div>
                    <div class="pagination fr">
                      <div class="block">
                        <el-pagination
                          @current-change="handleCurrentChange"
                          :current-page.sync="pageInfo.page"
                          :page-size="10"
                          layout="prev, pager, next, jumper"
                          :total="pageInfo.total"
                        ></el-pagination>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="减员" name="second">
                <div class="mainContainer caseListPage">
                  <div class="table-serch-bar">
                    <el-form ref="form" :inline="true" size="medium" label-width="70px">
                      <el-form-item label="用户名称">
                        <el-input v-model="form.name"></el-input>
                      </el-form-item>
                      <el-form-item label="参保地">
                        <el-input v-model="form.a_region"></el-input>
                      </el-form-item>
                      <el-form-item label="创建时间">
                        <el-col :span="10">
                          <el-date-picker type="date" placeholder="选择日期" v-model="form.Stime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="10">
                          <el-date-picker type="date" placeholder="选择日期" v-model="form.Etime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                        </el-col>
                      </el-form-item>
                      <el-form-item label="状态">
                        <el-select v-model="form.status" placeholder="请选择">
                          <el-option label="申报中" value="1"></el-option>
                          <el-option label="已撤回" value="2"></el-option>
                          <el-option label="申报成功" value="3"></el-option>
                          <el-option label="申报失败" value="4"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="success" @click="onSubmit">查询</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                  <el-table
                    @selection-change="handleSelectionChange"
                    class="my-table"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :default-sort="{prop: 'date', order: 'descending'}"
                  >
                    <el-table-column width="55" align="center" type="selection"></el-table-column>
                    <el-table-column min-width="90" align="center" type="index" label="序号"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="companyName" label="客户名称"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="name" label="姓名"></el-table-column>
                    <el-table-column min-width="200" align="center" prop="id_card" label="证件号"></el-table-column>
                    <el-table-column min-width="200" align="center" prop="a_region" label="参保地"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="a_jointime" label="参保时间"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="a_downtime" label="减员生效时间"></el-table-column>
                    <el-table-column min-width="90" align="center" prop="a_cbase" label="基数"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="status" label="状态"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="create_time" label="创建时间"></el-table-column>

                  </el-table>
                  <div class="table-tools clearfix">
                    <div class="fl">
                      <!--                      <el-button type="default" icon="iconfont iconview" size="medium">报盘</el-button>-->
                      <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase">申报成功</el-button>
                      <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase1">申报失败</el-button>
                      <el-button type="default" icon="iconfont icondelet1" size="medium" @click="handleTest2">数据下载</el-button>
                    </div>
                    <div class="pagination fr">
                      <div class="block">
                        <el-pagination
                          @current-change="handleCurrentChange"
                          :current-page.sync="pageInfo.page"
                          :page-size="10"
                          layout="prev, pager, next, jumper"
                          :total="pageInfo.total"
                        ></el-pagination>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="调基" name="third"><div class="mainContainer caseListPage">
                <div class="table-serch-bar">
                  <el-form ref="form" :inline="true" size="medium" label-width="70px">
                    <el-form-item label="用户名称">
                      <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="参保地">
                      <el-input v-model="form.a_region"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间">
                      <el-col :span="10">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.Stime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                      </el-col>
                      <el-col class="line" :span="1">-</el-col>
                      <el-col :span="10">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.Etime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="状态">
                      <el-select v-model="form.status" placeholder="请选择">
                        <el-option label="申报中" value="1"></el-option>
                        <el-option label="已撤回" value="2"></el-option>
                        <el-option label="申报成功" value="3"></el-option>
                        <el-option label="申报失败" value="4"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="success" @click="onSubmit">查询</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <el-table
                  @selection-change="handleSelectionChange"
                  class="my-table"
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :default-sort="{prop: 'date', order: 'descending'}"
                >
                  <el-table-column width="55" align="center" type="selection"></el-table-column>
                  <el-table-column min-width="90" align="center" type="index" label="序号"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="companyName" label="客户名称"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="name" label="姓名"></el-table-column>
                  <el-table-column min-width="200" align="center" prop="id_card" label="证件号"></el-table-column>
                  <el-table-column min-width="200" align="center" prop="a_region" label="参保地"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="a_jointime" label="参保时间"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="a_s_cbase" label="原基数"></el-table-column>
                  <el-table-column min-width="90" align="center" prop="a_e_cbase" label="现基数"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="a_e_person_ratio" label="新个人比例"></el-table-column>
                  <el-table-column min-width="90" align="center" prop="a_e_company_ratio" label="新公司比例"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="status" label="状态"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="create_time" label="创建时间"></el-table-column>

                </el-table>
                <div class="table-tools clearfix">
                  <div class="fl">
                    <!--                      <el-button type="default" icon="iconfont iconview" size="medium">报盘</el-button>-->
                    <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase">申报成功</el-button>
                    <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase1">申报失败</el-button>
                    <el-button type="default" icon="iconfont icondelet1" size="medium" @click="handleTest3">数据下载</el-button>
                  </div>
                  <div class="pagination fr">
                    <div class="block">
                      <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageInfo.page"
                        :page-size="10"
                        layout="prev, pager, next, jumper"
                        :total="pageInfo.total"
                      ></el-pagination>
                    </div>
                  </div>
                </div>
              </div>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </div>
    </el-row>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import XLSX from "xlsx";

export default {
  inject:['reload'],
  name: "reportac",
  data() {
    return {
      activeName: 'first',
      checked: true,
      selected: [],
      tableData: [],
      form: {
        s_region: "",
        name: "",
        status: "",
        Etime: null,
        Stime: null
      },
      currentPage3: 1,
      discount: true,
      discount2: true,
      value: "",
      value2: "",
      addrs: [],
      pageInfo: {
        total: 0,
        pageSize: 10,
        page: 1
      }
    };
  },
  created() {
    this.getlist();
    this.getAllAddrs();
  },
  methods: {
    handleClick(tab, event) {
      this.pageInfo.page = 1;
      this.getlist();
    },
    getlist: function() {
      let param = this.initGetListParam();
      Http.api
        .post(
          "/test/v7",
          param
        )
        .then(res => {
          this.tableData = res.data.data;
          this.pageInfo.total = res.data.pageList.total;
        });
    },
    initGetListParam: function() {
      let param = new Object();
      param.page = this.pageInfo.page;
      param.pageSize = this.pageInfo.pageSize;
      param.actionName=this.activeName;
      param.name = this.form.name;
      param.a_region = this.form.a_region;
      param.status = this.form.status;
      param.Stime = this.form.Stime;
      param.Etime = this.form.Etime;
      param.service_type = 2;
      return param;
    },
    getAllAddrs() {
      Http.api.get("/addr/allPermission",{params:{permissionType:0}}).then(res => {
        this.addrs = res.data;
      });
    },
    handleCurrentChange(val) {
      this.getlist();
    },
    onSubmit() {
      this.pageInfo.page = 1;
      this.getlist();
    },
    //申报成功
    changeCase() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据");
        return;
      } else {
        let ids = new Array();
        this.selected.forEach(e => {
          ids.push(e.id);
        });
        Http.api.post("/test/v8", { ids: ids }).then(res=>{
          this.reload();
        })
      }
    },
    changeCase1() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据");
        return;
      } else {
        let ids = new Array();
        this.selected.forEach(e => {
          ids.push(e.id);
        });
        Http.api.post("/test/v9", { ids: ids }).then(res=>{
          this.reload();
        })
      }
    },
    handleSelectionChange: function(val) {
      this.selected = val;
    },
    handleTest1(){
      //拿数据
      let param = this.initGetListParam();
      Http.api
        .post(
          "/test/v14",
          param
        )
        .then(res => {
          const data = [];// 表格数据定义
          // 表头
          const tableHeaderList = [
            ["姓名", "证件号","参保地","参保时间", "基数","创建时间"]
          ];
          tableHeaderList.map((tableHeaderItem) => {
            data.push(tableHeaderItem);
          });
          // 表格数据
          const tableDataList = res.data;
          tableDataList.map((tableDataItem) => {
            data.push(tableDataItem);
          });
          // 将数据转成XLSX需要的格式
          const ws = XLSX.utils.aoa_to_sheet(data);
          // 合并单元格
          // merges合并单元格: s开始，e结束, c是列,r是行[A1相当于0列]
          // cols列宽度
          const  cols = [
            {wch: 20}, //第一列
            {wch: 8} //第一列
          ];
          ws["!cols"] = cols;
          // 设置样式(暂时无效)
          var styleBase = {
            font: {
              name: '宋体',
              sz: 10,
              color: {
                rgb: '00104E8B'
              }
            },
            border: { // 设置边框
              top: { style: 'thin' },
              bottom: { style: 'thin' },
              left: { style: 'thin' },
              right: { style: 'thin' }
            },
            alignment: { horizontal: "center", vertical: "center", wrap_text: true },
            fill: { bgcolor: { rgb: 'ffff00' } }
          };
          Object.keys(ws).map((wsItem) => {
            if(["!ref", "!cols"].includes(wsItem)) {
              return true;
            }
            ws[wsItem].s = styleBase;
          });
          const wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
          function s2ab(s) {
            if (typeof ArrayBuffer !== 'undefined') {
              var buf = new ArrayBuffer(s.length);
              var view = new Uint8Array(buf);
              for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
              return buf;
            } else {
              var buf = new Array(s.length);
              for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
              return buf;
            }
          };
          saveAs(new Blob([
              s2ab(
                // 这里的数据是用来定义导出的格式类型
                XLSX.write(wb, {
                  bookType: 'xlsx',
                  bookSST: false,
                  type: 'binary'
                })
              )
            ], {
              type: ""
            }),
            "公积金增员.xlsx");
        });
    },
    handleTest2(){
      //拿数据
      let param = this.initGetListParam();
      Http.api
        .post(
          "/test/v15",
          param
        )
        .then(res => {
          const data = [];// 表格数据定义
          // 表头
          const tableHeaderList = [
            ["姓名", "证件号","参保地","参保时间","减员生效时间", "基数","创建时间"]
          ];
          tableHeaderList.map((tableHeaderItem) => {
            data.push(tableHeaderItem);
          });
          // 表格数据
          const tableDataList = res.data;
          tableDataList.map((tableDataItem) => {
            data.push(tableDataItem);
          });
          // 将数据转成XLSX需要的格式
          const ws = XLSX.utils.aoa_to_sheet(data);
          // 合并单元格
          // merges合并单元格: s开始，e结束, c是列,r是行[A1相当于0列]
          // cols列宽度
          const  cols = [
            {wch: 20}, //第一列
            {wch: 8} //第一列
          ];
          ws["!cols"] = cols;
          // 设置样式(暂时无效)
          var styleBase = {
            font: {
              name: '宋体',
              sz: 10,
              color: {
                rgb: '00104E8B'
              }
            },
            border: { // 设置边框
              top: { style: 'thin' },
              bottom: { style: 'thin' },
              left: { style: 'thin' },
              right: { style: 'thin' }
            },
            alignment: { horizontal: "center", vertical: "center", wrap_text: true },
            fill: { bgcolor: { rgb: 'ffff00' } }
          };
          Object.keys(ws).map((wsItem) => {
            if(["!ref", "!cols"].includes(wsItem)) {
              return true;
            }
            ws[wsItem].s = styleBase;
          });
          const wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
          function s2ab(s) {
            if (typeof ArrayBuffer !== 'undefined') {
              var buf = new ArrayBuffer(s.length);
              var view = new Uint8Array(buf);
              for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
              return buf;
            } else {
              var buf = new Array(s.length);
              for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
              return buf;
            }
          };
          saveAs(new Blob([
              s2ab(
                // 这里的数据是用来定义导出的格式类型
                XLSX.write(wb, {
                  bookType: 'xlsx',
                  bookSST: false,
                  type: 'binary'
                })
              )
            ], {
              type: ""
            }),
            "公积金减员.xlsx");
        });
    },
    handleTest3(){
      //拿数据
      let param = this.initGetListParam();
      Http.api
        .post(
          "/test/v16",
          param
        )
        .then(res => {
          const data = [];// 表格数据定义
          // 表头
          const tableHeaderList = [
            ["姓名", "证件号","参保地","参保时间", "原基数","现基数","新个人比例","新公司比例","创建时间"]
          ];
          tableHeaderList.map((tableHeaderItem) => {
            data.push(tableHeaderItem);
          });
          // 表格数据
          const tableDataList = res.data;
          tableDataList.map((tableDataItem) => {
            data.push(tableDataItem);
          });
          // 将数据转成XLSX需要的格式
          const ws = XLSX.utils.aoa_to_sheet(data);
          // 合并单元格
          // merges合并单元格: s开始，e结束, c是列,r是行[A1相当于0列]
          // cols列宽度
          const  cols = [
            {wch: 20}, //第一列
            {wch: 8} //第一列
          ];
          ws["!cols"] = cols;
          // 设置样式(暂时无效)
          var styleBase = {
            font: {
              name: '宋体',
              sz: 10,
              color: {
                rgb: '00104E8B'
              }
            },
            border: { // 设置边框
              top: { style: 'thin' },
              bottom: { style: 'thin' },
              left: { style: 'thin' },
              right: { style: 'thin' }
            },
            alignment: { horizontal: "center", vertical: "center", wrap_text: true },
            fill: { bgcolor: { rgb: 'ffff00' } }
          };
          Object.keys(ws).map((wsItem) => {
            if(["!ref", "!cols"].includes(wsItem)) {
              return true;
            }
            ws[wsItem].s = styleBase;
          });
          const wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
          function s2ab(s) {
            if (typeof ArrayBuffer !== 'undefined') {
              var buf = new ArrayBuffer(s.length);
              var view = new Uint8Array(buf);
              for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
              return buf;
            } else {
              var buf = new Array(s.length);
              for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
              return buf;
            }
          };
          saveAs(new Blob([
              s2ab(
                // 这里的数据是用来定义导出的格式类型
                XLSX.write(wb, {
                  bookType: 'xlsx',
                  bookSST: false,
                  type: 'binary'
                })
              )
            ], {
              type: ""
            }),
            "公积金调基.xlsx");
        });
    },
  }
};
</script>

